/**
 * title: 扩展效果
 * description: 展示通过 useButtonStyles 提供的额外交互效果
 */

import React from 'react';
import { Button, Space, Divider, useButtonStyles } from '../../../';

const App: React.FC = () => {
  const { styles } = useButtonStyles();

  return (
    <>
      <Divider>浮动效果</Divider>
      <Space wrap>
        <Button type="primary" className={styles.floatingEffect}>
          悬停浮动
        </Button>
        <Button className={styles.floatingEffect}>
          悬停浮动
        </Button>
        <Button danger className={styles.floatingEffect}>
          悬停浮动
        </Button>
      </Space>

      <Divider>脉冲效果</Divider>
      <Space wrap>
        <Button type="primary" className={styles.pulseEffect}>
          脉冲动画
        </Button>
        <Button danger className={styles.pulseEffect}>
          重要提示
        </Button>
      </Space>

      <Divider>渐变背景</Divider>
      <Space wrap>
        <Button className={styles.gradientBackground}>
          渐变按钮
        </Button>
      </Space>

      <Divider>组合效果</Divider>
      <Space wrap>
        <Button 
          type="primary" 
          className={`${styles.floatingEffect} ${styles.pulseEffect}`}
        >
          浮动 + 脉冲
        </Button>
      </Space>
    </>
  );
};

export default App;

